// Positioning
.absolute(
@top: auto,
@right: auto,
@bottom: auto,
@left: auto
) {
  display: block;
  position: absolute;
  top: @top;
  right: @right;
  bottom: @bottom;
  left: @left;
}

.center() {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.flex() {
  display: flex;
}

.flex--center() {
  align-items: center;
  justify-content: center;
}

.flex--wrap() {
  flex-wrap: wrap;
}

.flex--space-between() {
  justify-content: space-between;
}

.flex--justify-start() {
  justify-content: flex-start;
}

.flex--align-start() {
  align-items: flex-start;
}

.flex--align-center() {
  align-items: center;
}

.flex--column() {
  flex-direction: column;
}

.flex--grow() {
  flex-grow: 1;
}

.flex__column() {
  display: flex;
  flex-flow: column;
  height: 100%;
  width: 100%;
}

// Aspect ratio for responsive height/width
.aspect-ratio(@width, @height) {
  position: relative;

  &::before {
    display: block;
    content: "";
    width: 100%;
    padding-top: (@height / @width) * 100%;
  }

  > .content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
}

// Backgrounds
.bg--teal() {
  background-color: var(--teal);
}

// Border radius
.radius(@radius: 1) {
  border-radius: (@radius * 4px);
}

// Borders
.border() {
  border: 1px solid var(--section);
}

// Hovers
.icon-hover() {
  color: var(--icon);
  transition: color @transition-time;

  &:hover {
    color: var(--title);
  }
}

.icon--margin() {
  .margin-right();
}

// Margins
.margin(@spacing: 1) {
  margin: (@spacing * 8px);
}

.margin-top(@spacing: 1) {
  margin-top: (@spacing * 8px);
}

.margin-right(@spacing: 1) {
  margin-right: (@spacing * 8px);
}

.margin-bottom(@spacing: 1) {
  margin-bottom: (@spacing * 8px);
}

.margin-left(@spacing: 1) {
  margin-left: (@spacing * 8px);
}

.margin-v-sides(@spacing: 1) {
  margin-top: (@spacing * 8px);
  margin-bottom: (@spacing * 8px);
}

.margin-h-sides(@spacing: 1) {
  margin-right: (@spacing * 8px);
  margin-left: (@spacing * 8px);
}

// Paddings
.padding(@spacing: 1) {
  padding: (@spacing * 8px);
}

.padding-top(@spacing: 1) {
  padding-top: (@spacing * 8px);
}

.padding-right(@spacing: 1) {
  padding-right: (@spacing * 8px);
}

.padding-bottom(@spacing: 1) {
  padding-bottom: (@spacing * 8px);
}

.padding-left(@spacing: 1) {
  padding-left: (@spacing * 8px);
}

.padding-v-sides(@spacing: 1) {
  padding-top: (@spacing * 8px);
  padding-bottom: (@spacing * 8px);
}

.padding-h-sides(@spacing: 1) {
  padding-right: (@spacing * 8px);
  padding-left: (@spacing * 8px);
}

// Shadows
.shadow() {
  box-shadow: 0 8px 16px var(--shadow);
}

// Typography
.weight(@normal: @normal) {
  font-weight: @normal;
}

.text-align(@left: @left) {
  text-align: @left;
}

.teal() {
  color: var(--teal);
}

.warning() {
  color: var(--warning);
}

.letter-spacing() {
  letter-spacing: 0.6px;
}

.cursor--pointer() {
  cursor: pointer;
}

// inputs
.dropdown-input-mixin {
  background: var(--dropdown-bg);
  border-color: var(--button);

  &:hover,
  &:focus {
    background: var(--dropdown-bg);
    border-color: var(--button);
  }
}
